<!-- 日期选择 -->
<template>
	<view class="date-placeholder">
		<view class="content">
			<picker class="picker" mode="date" fields="month" :value="date" :start="startDate" :end="endDate"
				@change="bindDateChange">
				<text class="label">{{date2zh(date)}}</text>
				<text class="iconfont">&#xe62a;</text>
			</picker>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";

	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			return `2020-01`;
		} else if (type === 'end') {
			year = year;
		}
		month = month > 9 ? month : '0' + month;
		return `${year}-${month}`;
	}

	const date2zh = (date) => {
		return date.replace('-', '年') + '月';
	}

	const date = ref(getDate());
	const startDate = getDate('start');
	const endDate = getDate('end');

	const bindDateChange = (e) => {
		date.value = e.detail.value;
	}
</script>

<style lang="scss" scoped>
	.date-placeholder {
		height: 100rpx;

		.content {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: inherit;
			background-color: #f5f5f5;
			padding-left: 40rpx;
			box-sizing: border-box;

			.picker {
				display: flex;
				align-items: center;
				height: inherit;

				.label {
					font-size: 28rpx;
					color: #222222;
				}

				.iconfont {
					font-size: 24rpx;
					color: #222222;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>